<template>
  <!--内容...-->
  <div :class="{ active: !brandFold }" class="card" style="margin-top:60px">
    <div class="content">
      <div class="title"  :style="{backgroundColor:tileBgc}">{{titleLabel}}</div>
      <div class="contentUp">
        <div class="name">
          <ul>
            <li><span>意向客户：</span>{{ cardList.agentName }}</li>
            <li><span>联系人：</span>{{ cardList.contacts}}</li>
            <li><span>联系电话：</span>{{ cardList.contactPhone}}</li>
            <li><span>客户来源：</span>{{ cardList.customerSource}}</li>
            <li><span>备用电话1：</span>{{ cardList.phone1}}</li>
            <li><span>备用电话2：</span>{{ cardList.phone2}}</li>
            <li><span>地区：</span>{{ cardList.contactPhone}}</li>
            <li><span>客户类型：</span>{{ cardList.customerType}}</li>
            <li><span>客户进展：</span>{{ cardList.customerProgress}}</li>
            <li><span>行业/职位：</span>{{ cardList.industry}}</li>
            <li><span>性别：</span>{{ cardList.sex}}</li>
            <li><span>年龄：</span>{{ cardList.age}}</li>
            <li><span>学历：</span>{{ cardList.education}}</li>
            <li><span>关键字：</span>{{ cardList.keyWord}}</li>
            <li><span>城市类型：</span>{{ cardList.cityType}}</li>
            <li><span>客户备注：</span>{{ cardList.customerRemark}}</li>
          </ul>
        </div>
      </div>
      <div class="contentDown">
        <div class="contentDownList"></div>
      </div>
      <div
        class="info"
        v-if="Object.keys(cardList).length > 6"
        v-on:click="changeFoldState"
      >
        <span>{{ brandFold ? "点击查看详情" : "收起" }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
export default {
  name: "CardInfo",
  components: {},
  props: {
    cardList: {},
    tileBgc:{
      type: String,
    },
    titleLabel:{
      type:String
    }
  },
  data() {
    return {
      instance: "",
      isRouterAlive: true,
      brandFold: true
    };
  },
  methods: {
    // 展开收起
    changeFoldState() {
      this.brandFold = !this.brandFold;
    }
  },
  mounted() {}
};
</script>

<style scoped lang="scss">

.card {
  position: relative;
  .content {
    font-size: 0.34rem;
    .title{
      width:2.86rem;
      height:0.81rem;
      line-height: 0.81rem;
      color: #fff;
      font-weight: bold;

      font-size: 0.43rem;
      border-radius:0px 100px 100px 0px;
    }
    .contentUp {
      display: flex;
      flex-direction: row;
      margin-top: 0.48rem;
      justify-content: space-between;
      .name {
        margin-left: 0.49rem;
        font-size: 0.4rem;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 47px;
        ul{
          padding-left: 0;
          li{
            span{
              color: #CCCCCC;
            }
            color: #333333;
            font-size: 0.38rem;
            list-style: none;
            height: 0.49rem;
            line-height: 0.49rem;
            margin-top: 0.26rem;
            text-align: left
          }
        }
      }
    }
   
    .contentDown {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-left: 0.4rem;
      .contentDownList {
        display: block;
        margin-bottom: 0.26rem;
        text-align: left;
      }
    }
    .info {
      text-align: center;
      position: absolute;
      top: 83%;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 0.32rem;
      padding-top: 0.5rem;
      border-top: 1px solid #f0f0f0;
      padding-bottom: 0.47rem;
      background: #fff;
    }
  }
  margin: 0 auto;
  width: 9.2rem; //670px 计算公式 设计稿的px/75
  height: 8.1rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 8px 0px rgba(204, 204, 204, 0.5);
  margin-bottom: 0.32rem;
  overflow: hidden;
}
.active {
  height: auto;
  // overflow: scroll;
  .content{
    .info {
      top: 100%;
    }
  } 
}
</style>
